<template>
  <a-modal
    :visible="visible"
    title=""
    @cancel="onClose"
    :width="1000"
    :footer="null"
    :closable="false"
    centered
    :bodyStyle="{ padding: 0 }"
    :destroyOnClose="true"
  >
    <div class="content">
      <div class="title">请替换关键词</div>
      <div class="list-wrap" v-if="list.length > 0">
        <a-row :gutter="32" style="flex: 1">
          <a-col
            :span="8"
            v-for="(item, index) of list"
            :key="index"
            style="margin-bottom: 20px"
          >
            <div>{{ item[0] }}</div>
            <a-input
              v-model:value="item[1]"
              style="margin-top: 8px; border-radius: 8px"
              :placeholder="'请输入内容替换 ' + item[0]"
            />
          </a-col>
        </a-row>
        <SendOutlined class="send-button" @click="onSubmit" />
      </div>
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { SendOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "PromptsSearch",
  components: { SendOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    prompt: {
      type: Object,
      default: () => {},
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      list: [],
    });

    const init = () => {
      if (store.getters.isLogin) {
        if (
          props.prompt.content_matches &&
          props.prompt.content_matches.length > 0
        ) {
          state.list = props.prompt.content_matches;
        }
      }
    };

    init();

    const onClose = () => {
      context.emit("onClose");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        }
      }
    );

    const onSubmit = () => {
      let emptyInput = false;
      state.list.forEach((item) => {
        if (!item[1]) {
          emptyInput = true;
        }
      });
      if (emptyInput) {
        message.error("替换内容不能为空");
        return;
      }
      context.emit("replaceCallback", state.list);
    };

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-modal-body) {
  padding: 0 !important;
}
.content {
  background-color: #e9e9fe;

  .title {
    font-size: 18px;
    padding: 15px 20px;
  }

  .list-wrap {
    background-color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;

    .send-button {
      color: @primary-color;
      font-size: 28px;
      padding-left: 30px;
      cursor: pointer;
    }
  }
}
</style>
